

import React, { useEffect, useState, useRef } from 'react'
import { Col, Row, Typography, Input, Button, Table, Modal, Form, Select, DatePicker,Popconfirm } from 'antd';
import { PlusCircleOutlined,FormOutlined,DeleteOutlined} from '@ant-design/icons';
import { observer } from 'mobx-react';
import { ColumnsType } from 'antd/lib/table';
import { ajax } from '../../api';
import moment from 'moment';
import forms from '../../mobx/store/forms';
import { reg } from '../../utils/validate';
import  produce  from '../../mobx/store/produce';

const { Title } = Typography
const { Option } = Select;


function Formlist() {
    const [obj,setObj] = useState<any>({})
    const { formlist, getformList ,getlist,searchList} = forms
    const {producelist,cproducelist}:any =produce

    useEffect(() => {
        getformList({})
        cproducelist({})
    }, [])
    // console.log(producelist);
    
    
    const columns: ColumnsType<object> = [   //表头数据
        {
            title: 'Id',
            render: (text: any, value: any, index: number) => <b>{index + 1}</b>,
            align: "center",
            width: 50
        },
        {
            title: '订单编号',
            dataIndex: 'num',
            key: 'num',
            render: (text: any) => <b>{text}</b>,
            align: "center",
        },
        {
            title: '收货人',
            dataIndex: 'username',
            key: 'username',
            render: (text: any) => <b>{text}</b>,
            align: "center",
            width: 100
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
            render: (text: any) => <b>{text}</b>,
            align: "center",
            width:150
        },
        {
            title: '商品名称',
            dataIndex: 'pname',
            key: 'pname',
            render: (text: any) => <b>{text}</b>,
            align: "center"
        },
        {
            title: '收货地址',
            dataIndex: 'address',
            key: 'address',
            render: (text: any) => <b>{text}</b>,
            align: "center"
        },
        {
            title: '配送物流',
            dataIndex: 'wuliu',
            key: 'wuliu',
            render: (text: any) => <b>{text}</b>,
            align: "center",
            width:100
        },
        {
            title: '支付方式',
            dataIndex: 'way',
            key: 'way',
            render: (text: any) => <b>{text}</b>,
            align: "center",
            width:100
        },
        {
            title: '日期',
            dataIndex: 'time',
            key:"time",
            render: (text: any) => <b>{moment(text).format("YYYY-MM-DD HH:mm")}</b>,
            align: "center"
        },
        {
            title: '操作',
            align: "center",
            width:120,
            render:(text:any)=>{
                return(
                    <div>
                        <Button type="primary" size="small" style={{margin:"0 5px",backgroundColor:"skyblue"}} onClick={()=>change(text)}><FormOutlined /></Button>
                        
                        <Popconfirm
                            title="你确定要删除吗?"
                            onConfirm={()=>confirm(text)}
                            okText="确定"
                            cancelText="取消"
                        >
                           <Button danger size="small" ><DeleteOutlined /></Button>
                        </Popconfirm>
                    </div>
                )
            }

        },

    ]

    // 添加 表单
    const [form] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = async () => {
        const data = form.getFieldsValue()
        console.log(data);
        let { code, result }: any = await ajax.addlist(data)
        if(code == 200){
            setIsModalVisible(false);
            getformList({})
        }
    };

    // 删除
    const confirm = async (item:any) =>{
        console.log(item);
        let {code,result}:any = await ajax.delform({_id:item._id})
        if(code == 200){
            var list = formlist.filter((val:any)=>val._id!=item._id)
            // 重新请求数据
            getlist(list)
        }
    }
    const handleCancel = () => {
        setIsModalVisible(false);
        setShow(false)
    };

    // 修改
    const [show,setShow] = useState<boolean>(false)
    const change =(text:any)=>{
        setShow(true)
        form.setFieldsValue({
            address:text.address
        })
        setObj(text)
    }
    const conformSet = async(item:any)=>{   //确定修改
        const data = form.getFieldsValue()
        console.log(data);
        const {code,result}:any = await ajax.changeform({
            ...data,
            _id:obj._id
        })
        if(code == 200){
            var list = formlist.map((item:any)=>{
                if(item._id == obj._id){
                    item = {...item,...data}
                }
                return item
            })
            getlist(list)
            setShow(false)
        }
    }       
    
    //搜索
    const keyword:any = useRef()
    const searchForm =  () => {   //搜索
        const kw = keyword.current.state.value;
        // console.log(kw);
        searchList({   //查询
            keyword:kw,
        })
    }
    
    const onReset = () => { //重置
        form.resetFields()
    }
    return (
        <div>
            <Title level={3} style={{ margin: "20px", fontWeight: '500' }}>订单列表</Title>
            <Row>
                <Col span={6} style={{ margin: "0 20px" }}>
                    <Input placeholder='请输入关键字' ref={keyword}  style={{borderRadius:'10px'}}></Input>
                </Col>
                <Col>
                    <Button onClick={searchForm} style={{color:"#fff",backgroundColor:"skyblue",borderRadius:'20px'}}>搜索</Button>
                </Col>
            </Row>
            <Row>
                <Col style={{ margin: "20px", backgroundColor: "orange" }}>
                    <Button type="primary" style={{ backgroundColor: "orange", borderColor: "orange" }}
                        onClick={showModal}
                    ><PlusCircleOutlined />添加
                    </Button>
                    <Modal title="添加订单" visible={isModalVisible}
                        onOk={handleOk}
                        onCancel={handleCancel}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} form={form} name="basic">
                            <Form.Item label="订单编号" name="num"
                                rules={[
                                    { required: true, message: '请输入订单编号' },
                                    { pattern:reg.num,message:"请输入12位字母数字订单号"}
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item label="收货人" name="username">
                                <Input />
                            </Form.Item>
                            <Form.Item label="手机号码" name="phone"
                                rules={[
                                    { required: true, message: '请输入手机号' },
                                    {
                                        pattern:reg.phone,
                                        message:'请输入正确的手机号码'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item label="商品名称" name="pname">
                                <Select placeholder="请选择商品">
                                    {
                                        producelist.length>0 && producelist.map((v:any,i:any)=>(
                                            <Option  key={i} value={v.pname}>{v.pname}</Option>
                                        ))
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item label="收货地址" name="address">
                                <Input />
                            </Form.Item>
                            <Form.Item label="配送物流" name="wuliu">
                                <Select>
                                    <Select.Option value="顺丰快递">顺丰快递</Select.Option>
                                    <Select.Option value="中通快递">中通快递</Select.Option>
                                    <Select.Option value="申通快递">申通快递</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label="支付方式" name="way">
                                <Select>
                                    <Select.Option value="支付宝">支付宝</Select.Option>
                                    <Select.Option value="微信">微信</Select.Option>
                                    <Select.Option value="银行卡">银行卡</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label="下单日期" name="time" >
                                <DatePicker />
                                <Button htmlType="button" onClick={onReset} style={{marginLeft:60,backgroundColor:"teal",color:"#fff"}}>重置</Button>
                            </Form.Item>
                            
                        </Form>
                    </Modal>
                </Col>
            </Row>

            <Row style={{ marginLeft: 20 }}>
                <Col >
                    <Table
                        dataSource={formlist}
                        columns={columns}
                        sticky
                        bordered
                        id="table"
                        // rowKey={item=>item._id}
                        pagination={{ pageSize: 5 }}
                    >
                    </Table>
                </Col>
            </Row>

            <Row>
                <Col>
                    <Modal
                        title="修改订单信息"
                        visible={show}
                        onOk={conformSet}
                        onCancel={handleCancel}
                        okText="确定修改"
                        cancelText="取消修改"
                    >
                        <Form form={form} name="basic">
                            <Form.Item label="收货地址" name="address">
                                <Input />
                            </Form.Item>
                        </Form>
                    </Modal>
                </Col>
            </Row>
        </div>
    )
}
export default observer(Formlist)




